﻿@page "/range-slider/default"

@using Syncfusion.Blazor.Inputs;
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the default rendering of Slider component. Drag the thumb over the bar for selecting the values between Min and Max.</p>
</SampleDescription>
<ActionDescription>
   <p>The Slider component allows to select a value or range of values in-between a min and max range, by dragging the thumb over the slider bar. Three types of sliders are:</p>
    <ul><li><code>Default</code> - allows to select a single value.</li>
        <li><code>MinRange</code> – allows to select a single value, but highlights with a range selection from the min value to the currenthandle value.</li>
        <li><code>Range</code> – allows to select a range of values with two handles, where the handles are connected with a range selection.</li>
        <p>In this demo, the Default, MinRange and Range Slider types can be seen.</p>
    </ul>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <div class="sliderwrap">
            <label class="labeltext userselect">Default Slider</label>
            <SfSlider Value="30"></SfSlider>
        </div>
        <div class="sliderwrap">
            <label class="labeltext userselect">MinRange Slider</label>
            <SfSlider Value="30" Type=SliderType.MinRange></SfSlider>
        </div>
        <div class="sliderwrap">
            <label class="labeltext userselect">Range Slider</label>
            <SfSlider Value=@Value Type=SliderType.Range></SfSlider>
        </div>
    </div>
</div>

@code{
    
    public int[] Value = { 20, 50 };
      
}

<style>
    .content-wrapper {
        width: 40%;
        margin: 0 auto;
        min-width: 185px;
    }
    .sliderwrap {
        margin-top: 40px;
    }
    .e-bigger .content-wrapper {
        width: 80%;
    }
    .sliderwrap label {
        padding-bottom: 26px;
        font-size: 13px;
        font-weight: 500;
        margin-top: 15px;
    }
    .userselect {
        -webkit-user-select: none; /* Safari 3.1+ */
        -moz-user-select: none; /* Firefox 2+ */
        -ms-user-select: none; /* IE 10+ */
        user-select: none; /* Standard syntax */
    }
</style>
